<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生 Ajax 请求</title>
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"/>
    <script type="text/javascript">
        function ajaxRequest() {
            //通过 ID 获取表单DOM对象
            var form = document.getElementById('form01');
            //FormData: 构建 前端表单数据
            //既可以基于已有表单构建
            var formData = new FormData(form);
            //也可以通过 append() 方法 追加表单数据
            formData.append('param1', 'value1');
            //1.创建 XMLHttpRequest 对象
            var xmlHttpRequest = new XMLHttpRequest();
            //2.请求参数的设置 调用 open 方法
            //参数分别是：请求方式、URL、是否使用异步请求方式
            // xmlHttpRequest.open('POST', './ajax01.do', true);
            //通过表单 DOM 对象的 method 和 action 属性可以直接设置
            xmlHttpRequest.open(form.method, form.action, true);
            //3. 监听  onreadystatechange 事件
            //当 readyState 改变时，就会触发 onreadystatechange 事件
            //readyState == 4: 请求已完成，且响应已就绪
            xmlHttpRequest.onreadystatechange = function () {
                //等到服务器响应就绪的时候 执行以下内容
                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                    // xmlHttpRequest.responseText  代表服务器响应的字符串参数
                    console.log(xmlHttpRequest.responseText);
                }
            };
            //4.调用 send 方法 发送请求
            xmlHttpRequest.send(formData);
        }

        window.onload = function () {
            document.getElementById('btn').onclick = function () {
                ajaxRequest();
            }
        };
    </script>
</head>
<body>
<button id="btn">发射Ajax请求</button>
<form action="./ajax01.do" method="POST" id="form01">
    学生ID：<input type="text" name="id"><br/>
    学生名称：<input type="text" name="name"><br/>
    学生年龄：<input type="text" name="age"><br/>
    学校：<input type="text" name="school"><br/>
    <button type="button" onclick="ajaxRequest()">提交</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/dist/js/bootstrap.min.js"></script>
</body>
</html>